<template>
	<view>
		<view class="top">
			<uni-search-bar cancelButton="none" placeholder="请输入查找的订单号" @confirm="confirm" @cancel="cancel" />
			<view class="pop" @tap="stateClick" :class="[stateIf?'popActive':'']">{{stateList[stateIndex]}}<i class="iconfont iconxiala"></i></view>
		</view>
		<view class="popCont" v-show="stateIf" catchtouchmove="false">
			<view class="popItem" v-for="(item,index) in stateList" :key="index" @tap="stateItem(index)">
				<view :class="[index == stateIndex ? 'name_active' : '']">{{item}}</view>
				<i v-if="index == stateIndex" class="iconfont iconduigou"></i>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in orderList" :key='index'>
				<view class="title">
					<view>订单号：{{item.charge_order_sn}}</view>
					<view :class="item.pad_state == 1 || item.pad_state == 2 ? 'stateColor1':item.pad_state == 3 ? 'stateColor2':item.charge_state == 2 ? 'stateColor0':'stateColor'">{{item.stateName}}</view>
				</view>
				<view class="cont">
					<image :src="item.charge_image" mode="widthFix"></image>
					<view>
						<view class="name">{{item.member_card_name}}</view>
						<view class="price">￥{{item.charge_all_cion}}</view>
					</view>
				</view>
				<view class="btns">
					<!-- <view class="btn">我的客服</view> -->
					<navigator hover-class="false" :url="'orderDetail?unid='+item.unid" class="btn btn-detail">订单详情</navigator>
				</view>
			</view>
			<uni-load-more v-if="orderList.length >= 6" :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				stateList: ['全部', '待付款', '已付款', '待发货', '待收货', '已签收'],
				stateIndex: 0,
				stateIf: false,
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				orderList: [], //订单列表
				charge_order_sn: '', //订单号
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.reload = true;
			this.orderList = [];
			this.getList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getList();
			}, 500);
		},
		onShow() {
			this.page = 1;
			this.reload = true;
			this.orderList = [];
			this.getList();
		},
		methods: {
			// 获取订单列表
			getList() {
				var data = {
					page: this.page,
					limit: 8
				}
				if (this.charge_order_sn) {
					data.charge_order_sn = this.charge_order_sn;
				}
				if (this.stateIndex > 0 && this.stateIndex < 3) {
					data.charge_state = this.stateIndex;
				} else if (this.stateIndex >= 3) {
					data.pad_state = Number(this.stateIndex - 2);
				}
				this.$mapi.apiPost('api/v1/mobile/member/card/order/infos', data).then(res => {
					if (res.data.code == 200 && res.data.data.list.length > 0) {
						var list = res.data.data.list;
						list.forEach((item, index) => {
							if (item.charge_state == 1) {
								item['stateName'] = '交易失败';
							} else if (item.charge_state == 2) {
								item['stateName'] = '已付款';
							}
							if (item.pad_state == 1) {
								item['stateName'] = '待发货';
							} else if (item.pad_state == 2) {
								item['stateName'] = '待收货';
							} else if (item.pad_state == 3) {
								item['stateName'] = '已签收';
							}
						})
						this.orderList = this.reload ? list : this.orderList.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.orderList = [];
						} else {
							this.status = 'noMore';
						}
					}
				})
			},
			// 关闭&打开订单蒙版
			stateClick() {
				this.stateIf = !this.stateIf;
			},
			// 筛选订单状态
			stateItem(index) {
				this.stateIndex = index;
				this.stateIf = false;
				this.page = 1;
				this.reload = true;
				this.orderList = [];
				this.getList();
			},
			// 搜索订单号
			confirm(e) {
				this.charge_order_sn = e.value;
				this.page = 1;
				this.reload = true;
				this.orderList = [];
				this.getList();
			},
			// 取消搜索
			cancel() {
				this.charge_order_sn = "";
				this.page = 1;
				this.reload = true;
				this.orderList = [];
				this.getList();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	/* 顶部 */
	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		position: fixed;
		/* #ifdef APP-NVUE */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88upx;
		/* #endif */
		left: 0;
		width: 100%;

		.uni-searchbar {
			width: 65%;
			position: static;
		}

		.pop {
			display: flex;
			align-items: center;
			color: #333333;
			font-size: 34upx;
			margin: 0 auto;

			& i {
				color: #666666;
			}
		}

		.popActive {
			color: #FF9900;

			& i {
				color: #FF9900;
				transform: rotate(180deg);
			}
		}
	}

	/* 蒙版 */
	.popCont {
		position: fixed;
		/* #ifdef APP-PLUS */
		top: 100upx;
		/* #endif */
		/* #ifdef H5 */
		top: 188upx;
		/* #endif */
		width: 100%;
		height: calc(100% - 88upx);
		background-color: rgba(0, 0, 0, .5);
		z-index: 9999;

		.popItem {
			display: flex;
			justify-content: space-between;
			height: 90upx;
			padding: 0 30upx;
			background-color: #FFFFFF;
			border-top: 2upx solid #E5E5E5;

			& view {
				color: #666666;
				font-size: 34upx;
				line-height: 88upx;
			}

			& i {
				color: #FF9900;
				line-height: 88upx;
			}

			.name_active {
				color: #FF9900 !important;
			}
		}

		.popItem:first-child {
			border: none;
		}
	}

	/* 列表 */
	.list {
		margin-top: 120upx;

		.item {
			margin-top: 20upx;
			padding: 0 30upx;
			width: calc(100% - 60upx);
			background-color: #FFFFFF;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20upx 0;
				border-bottom: 2upx solid #E5E5E5;

				& view:first-child {
					color: #333333;
					font-size: 34upx;
				}

				.stateColor {
					color: #FF7171;
				}

				.stateColor0 {
					color: #00D5A2;
				}

				.stateColor1 {
					color: #00ACFE;
				}

				.stateColor2 {
					color: #999999;
				}
			}

			.cont {
				display: flex;
				align-items: flex-start;
				padding: 34upx 0;
				border-bottom: 2upx solid #E5E5E5;

				& image {
					width: 35%;
					height: 160upx;
					margin-right: 20upx;
				}

				& view {
					.name {
						color: #333333;
						font-size: 34upx;
						font-weight: 500;
					}

					.price {
						color: #333333;
						font-size: 32upx;
					}
				}
			}

			.btns {
				padding: 30upx 0;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.btn {
					color: #00ACFE;
					font-size: 34upx;
					padding: 6upx 16upx;
					border: 2upx solid #00ACFE;
					margin-left: 20upx;
					border-radius: 10upx;
					line-height: 1.5;
				}

				.btn-detail {
					color: #FF9900;
					border-color: #FF9900;
				}
			}
		}
	}
</style>
